<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{{appName}} - 下载中心</title>
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"
      rel="stylesheet"
    />
    <style>
      :root {
        --primary-green: #4caf50;
        --light-green: #8bc34a;
        --lighter-green: #c8e6c9;
        --white: #ffffff;
        --cream: #fff9e6;
        --brown: #795548;
      }

      body {
        background: linear-gradient(
          to bottom,
          var(--cream),
          var(--lighter-green)
        );
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        min-height: 100vh;
      }

      .app-header {
        background: linear-gradient(
          135deg,
          var(--primary-green) 0%,
          var(--light-green) 100%
        );
        color: var(--white);
        padding: 3rem 0;
        margin-bottom: 2rem;
        border-radius: 0 0 20px 20px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
      }

      .app-icon {
        width: 100px;
        height: 100px;
        border-radius: 20px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        margin-bottom: 1rem;
        border: 3px solid var(--white);
      }

      .version-cards-container {
        display: flex;
        gap: 20px;
        margin-bottom: 2rem;
      }

      .version-card {
        flex: 1;
        border: none;
        border-radius: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
        background-color: var(--white);
        min-width: 0; /* 防止内容溢出 */
      }

      .version-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
      }

      .btn-download {
        padding: 0.8rem 2rem;
        border-radius: 50px;
        font-weight: 600;
        font-size: 1.1rem;
        background: linear-gradient(
          to right,
          var(--primary-green),
          var(--light-green)
        );
        border: none;
        color: white;
      }

      .btn-download:hover {
        background: linear-gradient(
          to right,
          var(--light-green),
          var(--primary-green)
        );
        transform: translateY(-2px);
      }

      .version-badge {
        font-size: 0.9rem;
        padding: 0.3rem 0.8rem;
        border-radius: 50px;
      }

      .version-list {
        max-height: 500px;
        overflow-y: auto;
        background-color: var(--white);
        border-radius: 15px;
        padding: 1rem;
        box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
      }

      .version-item {
        border-left: 4px solid transparent;
        transition: all 0.3s;
        padding: 1rem;
        margin-bottom: 0.5rem;
        background-color: var(--white);
        border-radius: 10px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
      }

      .version-item:hover {
        background-color: var(--lighter-green);
        border-left-color: var(--primary-green);
      }

      .version-item.stable {
        border-left-color: var(--primary-green);
      }

      .version-item.snapshot {
        border-left-color: #2196f3;
      }

      .version-item.beta {
        border-left-color: #ff9800;
      }

      .force-update-info {
        background-color: #ffebee;
        border-radius: 5px;
        padding: 0.5rem;
        margin-top: 0.5rem;
        font-size: 0.9rem;
        color: #d32f2f;
      }

      footer {
        background-color: var(--brown);
        color: var(--cream);
        padding: 1.5rem 0;
        margin-top: 3rem;
        border-radius: 20px 20px 0 0;
      }
      /* 在样式部分添加以下规则 */
      .card-body.text-center {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
      }

      @media (max-width: 768px) {
        .version-cards-container {
          flex-direction: column;
          gap: 15px;
        }

        .app-header {
          padding: 2rem 0;
        }
      }
    </style>
  </head>
  <body>
    <div class="app-header text-center">
      <img
        src="./static/images/app-icon.jpeg"
        alt="App Icon"
        class="app-icon"
      />
      <h1>{{appName}}</h1>
      <p class="lead">最新版本下载</p>
    </div>

    <div class="container">
      <div class="row justify-content-center">
        <div class="col-lg-10">
          <div
            class="card mb-4"
            style="background-color: rgba(255, 255, 255, 0.8)"
          >
            <div class="card-body text-center">
              <h3 class="card-title">应用介绍</h3>
              <p class="card-text">{{appDescription}}</p>
            </div>
          </div>

          <!-- 版本卡片容器 -->
          <div class="version-cards-container">
            <!-- 最新稳定版 -->
            <div class="version-card" id="stable-version">
              <div class="card-body text-center">
                <h3 class="card-title">
                  <i class="bi bi-shield-check"></i> 稳定版
                </h3>
                <div id="stableVersion" class="my-3">
                  <div class="spinner-border text-success" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </div>
                <button
                  id="downloadStableBtn"
                  class="btn btn-download"
                  disabled
                >
                  <i class="bi bi-download"></i> 下载稳定版
                </button>
              </div>
            </div>

            <!-- 最新版本（所有类型） -->
            <div class="version-card" id="latest-version">
              <div class="card-body text-center">
                <h3 class="card-title">
                  <i class="bi bi-lightning-charge"></i> 最新版
                </h3>
                <div id="latestVersion" class="my-3">
                  <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </div>
                <button
                  id="downloadLatestBtn"
                  class="btn btn-download"
                  disabled
                >
                  <i class="bi bi-download"></i> 下载最新版
                </button>
              </div>
            </div>
          </div>

          <!-- 版本历史 -->
          <div
            class="card mb-4"
            style="background-color: rgba(255, 255, 255, 0.8)"
          >
            <div class="card-body">
              <h3 class="card-title text-center">
                <i class="bi bi-clock-history"></i> 版本历史
              </h3>
              <div class="version-list" id="versionHistory">
                <div class="text-center py-4">
                  <div class="spinner-border text-success" role="status">
                    <span class="visually-hidden">Loading...</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer class="text-center">
      <p>© 2023 {{appName}}. 版权所有。</p>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      const baseApiUrl = "./api"; // 改为相对路径
      const appName = "{{appName}}";

      // 加载版本数据
      function loadVersions() {
        // 加载最新稳定版
        fetch(`${baseApiUrl}/versions/latest?type=stable`)
          .then((response) => response.json())
          .then((version) => {
            if (version.id) {
              document.getElementById("stableVersion").innerHTML = `
            <h4>v${version.major_version}.${version.minor_version}.${version.patch_version}</h4>
            <p class="text-muted">发布于 ${version.publish_time}</p>
          `;
              document.getElementById("downloadStableBtn").disabled = false;
              document.getElementById("downloadStableBtn").onclick = () => {
                window.location.href = version.apk_url;
              };
            } else {
              document.getElementById("stableVersion").innerHTML = `
            <div class="alert alert-info">暂无稳定版</div>
          `;
            }
          });

        // 加载最新版本（所有类型）
        fetch(`${baseApiUrl}/versions/latest`)
          .then((response) => response.json())
          .then((version) => {
            if (version.id) {
              const badgeClass =
                version.version_type === "stable"
                  ? "bg-success"
                  : version.version_type === "snapshot"
                  ? "bg-primary"
                  : "bg-warning";
              const typeText =
                version.version_type === "stable"
                  ? "稳定版"
                  : version.version_type === "snapshot"
                  ? "快照版"
                  : "测试版";

              document.getElementById("latestVersion").innerHTML = `
            <div class="d-flex justify-content-center align-items-center gap-2">
              <h4 class="mb-0">v${version.major_version}.${version.minor_version}.${version.patch_version}</h4>
              <span class="badge ${badgeClass} version-badge">${typeText}</span>
            </div>
            <p class="text-muted mt-2">发布于 ${version.publish_time}</p>
          `;
              document.getElementById("downloadLatestBtn").disabled = false;
              document.getElementById("downloadLatestBtn").onclick = () => {
                window.location.href = version.apk_url;
              };
            } else {
              document.getElementById("latestVersion").innerHTML = `
            <div class="alert alert-info">暂无可用版本</div>
          `;
            }
          });

        // 加载版本历史（只加载已启用的版本）
        fetch(`${baseApiUrl}/versions?active_only=true`)
          .then((response) => response.json())
          .then((versions) => {
            const container = document.getElementById("versionHistory");
            container.innerHTML = "";

            if (versions.length === 0) {
              container.innerHTML = `
            <div class="alert alert-info">暂无版本记录</div>
          `;
              return;
            }

            versions.forEach((version) => {
              const badgeClass =
                version.version_type === "stable"
                  ? "bg-success"
                  : version.version_type === "snapshot"
                  ? "bg-primary"
                  : "bg-warning";
              const typeText =
                version.version_type === "stable"
                  ? "稳定版"
                  : version.version_type === "snapshot"
                  ? "快照版"
                  : "测试版";

              const versionItem = document.createElement("div");
              versionItem.className = `version-item p-3 mb-2 ${version.version_type}`;

              let forceUpdateInfo = "";
              if (version.force_update_range) {
                forceUpdateInfo = `
              <div class="force-update-info">
                <i class="bi bi-exclamation-triangle-fill"></i> 
                强制更新范围: ${version.force_update_range}
              </div>
            `;
              }

              versionItem.innerHTML = `
            <div class="d-flex justify-content-between align-items-center">
              <div>
                <h5 class="mb-1">v${version.major_version}.${version.minor_version}.${version.patch_version}</h5>
                <span class="badge ${badgeClass} version-badge">${typeText}</span>
              </div>
              <small class="text-muted">${version.publish_time}</small>
            </div>
            <div class="mt-2">
              <p class="mb-1">${version.update_info}</p>
              ${forceUpdateInfo}
              <a href="./${version.apk_url}" class="btn btn-sm btn-outline-success mt-2">
                <i class="bi bi-download"></i> 下载
              </a>
            </div>
          `;
              container.appendChild(versionItem);
            });
          });
      }

      // 页面加载完成后执行
      document.addEventListener("DOMContentLoaded", function () {
        loadVersions();
      });
    </script>
  </body>
</html>
